<template lang="pug">
  svg(
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="0 0 48 48"
    enable-background="new 0 0 48 48"
    xml:space="preserve"
    v-html="iconSvg"
    :class="{'tu-icon tu-icon-active': isActive, 'tu-icon tu-icon-normal': !isActive, 'tu-rotate-180': rotate180, hasborder: hasBorder}"
    :style="{padding: padding + 'px', display: isBlock ? 'block' : 'inline'}"
    )

</template>

<script type='text/ecmascript-6'>
  import icons from './icons'

  export default {
    props: {
      size: {
        type: Number,
        default: 10
      },
      name: [String],
      isActive: {
        type: Boolean,
        default: false
      },
      isBlock: {
        type: Boolean,
        default: false
      },
      hasBorder: {
        type: Boolean,
        default: true
      },
      rotate180: {
        type: Boolean,
        default: false
      },
      padding: {
        type: Number,
        default: 2
      }
    },
    data () {
      return {

      }
    },
    computed: {
      iconSvg() {
        return icons[this.name]
      }
    }
  }
</script>

<style lang='stylus' rel='stylesheet/stylus'>
  @import '~assets/stylus/variables'

  svg
    &.hasborder
      background-color #eee
      border 1px solid $color-primary
      border-radius 50%
  .tu-icon
    width 30px

  .tu-icon-active
    path
      fill $color-primary
  // .tu-icon-normal
  //   path
  //     fill #fff
  .tu-rotate-180
    transform: rotateY(-180deg)

</style>
